<template>
  <l-layout
    class="learun-chat-user-list"
    :top="36"
    :topMove="false"
    :bottom="44"
    :bottomMove="false"
  >
    <template #top>
      <el-input
        v-model="keyword"
        size="small"
        placeholder="搜索：请输入关键词"
        clearable
      >
        <i slot="suffix" class="el-input__icon el-icon-search" />
      </el-input>
    </template>
    <div v-if="showUserList.length > 0" class="l-rblock" style="overflow: auto">
      <div
        v-for="(item, index) in showUserList"
        :key="index"
        class="learun-chat-user-list-item"
        @click="handleOpenMsg(item)"
      >
        <div
          class="learun-chat-user-list-close"
          @click.stop="handleClose(item, index)"
        >
          <i class="el-icon-close"></i>
        </div>
        <el-avatar
          :size="36"
          :src="avatar(item)"
          class="learun-chat-user-list-avatar"
        >
          <img :src="`${rootUrl}img/admin/head.png`" />
        </el-avatar>
        <div class="learun-chat-user-list-text">
          <p class="title">{{ getTitle(item) }}&nbsp;</p>
          <p class="msg">
            <span>{{ item.f_Content }}</span>
          </p>
        </div>
        <div class="learun-chat-user-list-time">{{ getTime(item.f_Time) }}</div>
        <el-badge
          v-if="item.f_NoReadNum"
          :value="item.f_NoReadNum"
          class="learun-chat-user-list-badge"
        ></el-badge>
      </div>
    </div>
    <div v-else class="no-data">
      <p class="no-data-text">{{ $t("暂无联系人") }}</p>
      <el-button type="primary" size="small" @click="handleAddUser"
        >添加</el-button
      >
    </div>
    <template #bottom>
      <div
        class="l-rblock learun-chat-user-list-bottom"
        v-if="showUserList.length > 0"
      >
        <el-button size="small" @click="handleAddUser">添加联系人</el-button>
      </div>
    </template>

    <l-dialog
      :title="$t('添加联系人')"
      :visible.sync="addUserVisible"
      :height="480"
      width="1024px"
      @ok="handleUserSelectOk"
      @closed="handleUserSelectClosed"
    >
      <l-user-select-panel ref="userSelectPanel"></l-user-select-panel>
    </l-dialog>

    <chat-box :visible.sync="chatVisible" :otherId="otherId"></chat-box>
  </l-layout>
</template>

<script>
import ChatBox from "./chatBox.vue";
export default {
  inject: ["top"],
  components: {
    ChatBox,
  },
  data() {
    return {
      addUserVisible: false,
      chatVisible: false,

      keyword: "",
      otherId: "",
    };
  },
  computed: {
    chatList() {
      return this.$store.state.im.chatList;
    },
    showUserList() {
      if (this.keyword) {
        return this.chatList.filter(
          (t) => this.getTitle(t).indexOf(this.keyword) > -1
        );
      } else {
        return this.chatList;
      }
    },
    msg() {
      return this.$store.state.message.msg.map;
    },
  },
  methods: {
    async refresh() {
      // 刷新消息列表
      await this.$store.dispatch("im/refreshChat");
    },
    async handleClose(item) {
      await this.$store.dispatch("im/removeChat", item);
    },
    handleOpenMsg(item) {
      this.otherId = item.f_OtherUserId;
      this.$store.dispatch("im/setChatUserId", item.f_OtherUserId);
      this.$store.dispatch("im/refreshMessage", {
        recvUserId: this.loginInfo.f_UserId,
        sendUserId:this.otherId,
      })
      this.chatVisible = true
    },

    handleAddUser() {
      this.addUserVisible = true;
    },
    async handleUserSelectOk() {
      let select = await this.$refs.userSelectPanel.getForm();
      const selectData = select.map((t) => {
        return {
          f_MyUserId: this.loginInfo.f_UserId,
          f_OtherUserId: t.f_UserId,
        };
      });
      this.addUserVisible = false;
      this.$store.dispatch("im/addChat", selectData);
    },
    handleUserSelectClosed() {
      this.$refs.userSelectPanel.resetForm();
    },

    avatar(item) {
      const user = this.lr_users[item.f_OtherUserId];
      if (user) {
        return user.f_HeadIcon
          ? `${this.apiUrl}organization/user/img/${user.f_HeadIcon}?token=${this.token}`
          : `${this.rootUrl}img/admin/head.png`;
      }
      return `${this.rootUrl}img/admin/head.png`;
    },
    getTitle(item) {
      const user = this.lr_users[item.f_OtherUserId];
      if (user) {
        let res = user.f_RealName;
        if (user.f_DepartmentId) {
          this.lr_loadDepartment(user.f_DepartmentId);
          const department = this.lr_department[user.f_DepartmentId];
          if (department) {
            res += `/${department.f_FullName}`;
          }
        }
        return res;
      } else {
        return " ";
      }
    },
    getTime(time) {
      const nowDate = this.$getDayTime("yyyy-MM-dd");
      const myDate = this.$formatDate(time, "yyyy-MM-dd");
      if (nowDate != myDate) {
        return myDate;
      } else {
        return this.$formatDate(time, "HH:mm:ss");
      }
    },
  },
};
</script>

<style lang="scss">
.learun-chat-user-list {
  .el-input__inner {
    border-radius: 0 !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
  }
  .el-input__icon {
    cursor: pointer;
  }
  .no-data {
    position: absolute;
    top: 50%;
    margin-top: -100px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    &-text {
      font-size: 14px;
      color: #909399;
      line-height: 20px;
      text-align: center;
      padding-top: 20px;
    }
  }

  &-bottom {
    text-align: center;
    padding: 0 8px;
    .el-button {
      width: 100%;
    }
  }

  &-item {
    position: relative;
    padding: 11px 64px 0 60px;
    background-color: #fff;
    border-bottom: 1px solid #f5f7f9;
    height: 64px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background-color: #e6f7ff;
    }
  }
  &-close {
    position: absolute;
    top: 24px;
    left: 4px;
    color: #666;
    display: none;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
  &-item:hover &-close {
    display: block;
  }
  &-avatar {
    position: absolute;
    top: 14px;
    left: 24px;
  }

  &-text {
    margin-left: 14px;
    overflow: hidden;
    flex: 1;
    padding-top: 1px;

    .title {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 14px;
      color: #333;
      margin: 0;
      margin-bottom: 4px;
    }
    .msg {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin: 0;
      font-size: 12px;
      color: #999;
    }
  }

  &-time {
    position: absolute;
    top: 14px;
    right: 8px;
    font-size: 12px;
    color: #666;
  }

  &-badge {
    display: block;
    position: absolute;
    top: 40px;
    right: 8px;
  }
}
</style>
